<template>
  <div class="join-content">
    <!-- <div class="wrapper"> -->
    <el-carousel class="wrapper-content" height="310px" :autoplay="false">
      <el-carousel-item class="item" v-for="side in sides" :key="side.id">
        <div class="bg" :style="{ backgroundImage: `url(${side.pic})` }">
          <h2 class="title">{{ side.title }}</h2>
          <h3 class="subtitle">{{ side.subtitle }}</h3>
          <h4 class="deputytitle">{{ side.deputytitle }}</h4>
        </div>
      </el-carousel-item>
    </el-carousel>

    <!-- </div> -->
    <div class="content">
      <div class="tq-right">
        <h3 class="tq-title">欢迎关注卷叔填填图</h3>
        <img class="tq-pic" src="https://wj.qq.com/image/ttq-qrcode@2x.png" alt="" />
        <div class="tq-serch">公众号搜索"卷叔填填图"</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sides: [
        {
          id: 1,
          title: '在校学生',
          subtitle: '轻松赚取',
          deputytitle: '奖励红包和惊喜礼物',
          pic: 'https://wj.qq.com/image/pc/act/join_1@2x.jpg',
        },
        {
          id: 2,
          title: '企业管理者',
          subtitle: '优先获得',
          deputytitle: '腾讯问卷行业报告',
          pic: 'https://wj.qq.com/image/pc/act/join_2@2x.jpg',
        },
        {
          id: 3,
          title: '自由职业者',
          subtitle: '亲自参与',
          deputytitle: '产品优化与迭代',
          pic: 'https://wj.qq.com/image/pc/act/join_3@2x.jpg',
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.join-content {
  width: 1038px;
  height: 310px;
  font-size: 12px;
  line-height: 1.5;
  display: flex;
  // align-items: center;
  margin: 0 auto 75px;
  // border:3px solid red;
  justify-content: space-between;
  // padding: 50px;
}
// .wrapper{
//   position: relative;
//   margin: 0 auto;
//   border: 1px solid #dddddd;
//   border-radius: 3px;
//   overflow: hidden;
//   box-sizing: border-box;
//   background-color: red;
.wrapper-content {
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: calc(100% - 233px);
}
.bg {
  height: 100%;

  background-repeat: no-repeat;
  background-position: center 0;
  background-size: 100%;
  position: relative;
}
@font-face {
  font-family: join;
  src: url('../assets/joinmin.ttf');
}

.subtitle,
.deputytitle{
  font-family: join;
  font-size: 38px;
  line-height: 52px;
  text-shadow: 0px 2.5px 2.5px rgba(0, 0, 0, 0.1)

}
.title{
  position: absolute;
  left: 5%;
  bottom: 75%;
  color: #fff;

}
.subtitle{
  position: absolute;
  left: 5%;
  bottom: 40%;
  color: #fff;
}
.deputytitle{
  position: absolute;
  left: 5%;
  bottom: 20%;
  color: #fff;

}
.content {
  // margin-left: 745px;
  width: 233px;
  height: 300px;
}
.tq-right {
  width: 180px;
  margin: auto;
  font-size: 16px;
}
.tq-title {
  border-radius: 4px;
  line-height: 34px;
  height: 34px;
  color: #fff;
  background-color: #f63a59;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 15px;
}
.tq-pic {
  width: 100%;
  margin: auto;
}
.tq-serch {
  font-size: 16px;
  width: 180px;
  margin: auto;
  color: red($color: #000000);
}
</style>
